<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .bj {
      position: fixed;
      opacity: 1;
      height: 100%;
      width: 100%;
      z-index: -1;
    }

    body {


    }

    li {
      list-style: none;
    }

    .nav > li {
      float: left;
    }

    .component-footer .footer-inner .footer-copyright .nav li a::after {
      position: absolute;
      content: '';
      right: 0;
      top: 2px;
      bottom: 2px;
      border-right: 1px solid #797A8A;
    }

    a {
      text-decoration: none
    }

    .component-footer .footer-inner .footer-copyright .nav li a {
      position: relative;
      font-size: 14px;
      color: #797A8A;
      display: inline-block;
      padding: 0 10px 0 6px;
    }

    .component-footer {
      position: relative;
      background: #242424;
      margin-top: 100px;
    }

    .component-footer .footer-inner {
      margin: auto;
      width: 1200px;
      padding-bottom: 60px;
      text-align: center;
      background: #242424;
    }

    .component-footer .footer-inner .footer-tags {
      width: 1200px;
      margin: auto;
      padding: 50px 0;
      border-bottom: 1px solid #505050;
      text-align: center;
    }

    .component-footer .footer-inner .footer-tags .tag-item {
      display: inline-block;
      width: 296px;
      justify-content: center;
    }

    .component-footer .footer-inner .footer-tags .tag-item .item-inner {
      display: inline-flex;
    }

    .component-footer .footer-inner .footer-tags .tag-item .item-inner .img {
      float: left;
      width: 57px;
      height: 57px;
    }

    .component-footer .footer-inner .footer-tags .tag-item .item-inner .img img {
      width: 57px;
      height: 57px;
    }

    .component-footer .footer-inner .footer-tags .tag-item .item-inner .info {
      float: left;
      padding-left: 16px;
      box-sizing: border-box;
      color: #fff;
      text-align: left;
    }

    .component-footer .footer-inner .footer-copyright {
      position: relative;
      margin-top: 30px;
    }

    .el-header a {
      color: #666;
      text-decoration: none;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: 0;
    }

    .el-table .el-table__cell {
      padding: 0;
    }

    .el-table .cell {
      white-space: nowrap; /*设置文本内容不换行*/
      text-overflow: ellipsis; /*设置文本超出时用省略号展示*/
    }

    .component-footer .footer-inner .footer-links {
      width: 1200px;
      margin: auto;
      margin-top: auto;
      margin-top: 20px;
      padding-top: 30px;
      border-top: 1px solid #505050;
      text-align: center;
    }
  </style>

</head>
<body>

<div id="app">
  <el-container>
    <el-header height="150px">
      <div style="width: 1200px;margin: 0 auto">
        <img style="vertical-align: middle "
             src="https://shopzhqichuangcom.oss-cn-hangzhou.aliyuncs.com/44/image/2021/06/a1d1c07fbd0e3ad2953cd116a86751c6.jpg"
             width="200" alt="">

        <a href="">热点资讯</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">商家入驻</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">社会招聘</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">校园招聘</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">帮助</a> <el-divider direction="vertical"></el-divider>
        <a href="">登录</a><el-divider direction="vertical"></el-divider>
        <a href="">注册</a><el-divider direction="vertical"></el-divider>
      </div>
      <!--导航菜单开始-->
      <div style="background-color:#fff">
        <el-menu @select="handleSelect" style="width: 1200px;font-size: 18px;margin: 0 auto;font-weight: bold;"
                 mode="horizontal" background-color="#fff"
                 text-color="#AD7D42" active-text-color="#fff">
          <el-menu-item v-for="c in categoryArr"
                        :index="c.id">{{c.name}}
          </el-menu-item>

          <div style="float: right;position: relative;top: 10px">
            <el-input type="text" v-model="wd">
              <!--在文本框中内嵌一个搜索按钮-->
              <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
            </el-input>
          </div>
        </el-menu>
      </div>
      <!--导航菜单结束-->
    </el-header>
    <el-main style="width: 1200px;margin: 0 auto">
      <el-row gutter="20">
        <el-col span="18">
          <!--走马灯开始-->
          <el-carousel trigger="click" height="500px">
            <el-carousel-item v-for="b in bannerArr">
              <img :src="b.url" width="100%" alt="">
            </el-carousel-item>
          </el-carousel>
          <!--走马灯结束-->
        </el-col>
        <el-col span="6">
          <!--排行榜开始-->
          <el-card>
            <h3>
              <i style="font-weight: bold" class="el-icon-trophy"> 销量最高</i>
            </h3>
            <el-divider></el-divider>
            <el-table :data="topArr">
              <el-table-column type="index" label="排名"></el-table-column>
              <el-table-column prop="title" label="商品标题"></el-table-column>
              <el-table-column prop="saleCount" label="商品销量"></el-table-column>
            </el-table>
          </el-card>
          <!--排行榜结束-->
        </el-col>
      </el-row>
      <el-divider content-position="left"><p style="height: 45px;
line-height: 45px;
font-size: 32px;
color: #35353A;
font-weight: bold;
margin: 0;">新品专区</p></el-divider>
      <el-row gutter="20">
        <el-col span="6" v-for="p in newArr">
          <el-card>
            <a :href="'/detail.html?id='+p.id">
              <img :src="p.url" width="100%" height="233">
            </a>
            <p style="font-size: 14px;height: 30px">
              <a :href="'/detail.html?id='+p.id">
                {{p.title}}
              </a>
            </p>
            <p>
              <b>￥{{p.price}}</b> <s>{{p.oldPrice}}</s>
              <span style="float: right">销量:{{p.saleCount}}件</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
      <el-divider content-position="left"><p style="height: 45px;
line-height: 45px;
font-size: 32px;
color: #35353A;
font-weight: bold;
margin: 0;">狗粮专区</p></el-divider>
      <el-row gutter="20">
        <el-col span="6" v-for="p in dogArr">
          <el-card>
            <a :href="'/detail.html?id='+p.id">
              <img :src="p.url" width="100%" height="233">
            </a>
            <p style="font-size: 14px;height: 30px">
              <a :href="'/detail.html?id='+p.id">
                {{p.title}}
              </a>
            </p>
            <p>
              <b>￥{{p.price}}</b> <s>{{p.oldPrice}}</s>
              <span style="float: right">销量:{{p.saleCount}}件</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
      <el-divider content-position="left"><p style="height: 45px;
line-height: 45px;
font-size: 32px;
color: #35353A;
font-weight: bold;
margin: 0;">猫粮专区</p></el-divider>
      <el-row gutter="20">
        <el-col span="6" v-for="p in catArr">
          <el-card>
            <a :href="'/detail.html?id='+p.id">
              <img :src="p.url" width="100%" height="233">
            </a>
            <p style="font-size: 14px;height: 30px">
              <a :href="'/detail.html?id='+p.id">
                {{p.title}}
              </a>
            </p>
            <p>
              <b>￥{{p.price}}</b> <s>{{p.oldPrice}}</s>
              <span style="float: right">销量:{{p.saleCount}}件</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
      <el-divider content-position="left"><p style="height: 45px;
                line-height: 45px;
                font-size: 32px;
                color: #35353A;
                font-weight: bold;
margin: 0;">保健品专区</p></el-divider>
      <el-row gutter="20">
        <el-col span="6" v-for="p in healthArr">
          <el-card>
            <a :href="'/detail.html?id='+p.id">
              <img :src="p.url" width="100%" height="233">
            </a>
            <p style="font-size: 14px;height: 30px">
              <a :href="'/detail.html?id='+p.id">
                {{p.title}}
              </a>
            </p>
            <p>
              <b>￥{{p.price}}</b> <s>{{p.oldPrice}}</s>
              <span style="float: right">销量:{{p.saleCount}}件</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
      <el-divider content-position="left" style="height: 45px "><p style="height: 45px;margin: 0;
line-height: 45px;
font-size: 32px;
color: #35353A;
font-weight: bold;">清洁专区</p></el-divider>
      <el-row gutter="20">
        <el-col span="6" v-for="p in cleanArr">
          <el-card>
            <a :href="'/detail.html?id='+p.id">
              <img :src="p.url" width="100%" height="233">
            </a>
            <p style="font-size: 14px;height: 30px">
              <a :href="'/detail.html?id='+p.id">
                {{p.title}}
              </a>
            </p>
            <p>
              <b>￥{{p.price}}</b> <s>{{p.oldPrice}}</s>
              <span style="float: right">销量:{{p.saleCount}}件</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>

      <div class="component-footer">
        <div class="footer-inner">
          <div class="footer-tags">
            <div class="tag-item">
              <div class="item-inner">
                <div class="img"><img
                        src="http://www.yczy365.com/static/dist/shop/image/pc/template1/footer-icon1.png">
                </div>
                <div class="info">
                  <p class="title">正品承诺</p>
                  <p class="sub-title">正品保障 假一赔十</p>
                </div>
              </div>
            </div>
            <div class="tag-item">
              <div class="item-inner">
                <div class="img"><img
                        src="http://www.yczy365.com/static/dist/shop/image/pc/template1/footer-icon2.png">
                </div>
                <div class="info">
                  <p class="title">低价保障</p>
                  <p class="sub-title">缩短中间环节 确保低价</p>
                </div>
              </div>
            </div>
            <div class="tag-item">
              <div class="item-inner">
                <div class="img"><img
                        src="http://www.yczy365.com/static/dist/shop/image/pc/template1/footer-icon3.png">
                </div>
                <div class="info">
                  <p class="title">7天无忧退换</p>
                  <p class="sub-title">退换无忧 售后无忧</p>
                </div>
              </div>
            </div>
            <div class="tag-item">
              <div class="item-inner">
                <div class="img"><img
                        src="http://www.yczy365.com/static/dist/shop/image/pc/template1/footer-icon4.png">
                </div>
                <div class="info">
                  <p class="title">满88包邮</p>
                  <p class="sub-title">部分特殊商品除外</p>
                </div>
              </div>
            </div>
          </div>

          <div class="footer-copyright">
            <ul class="nav">
            </ul>

            <ul class="nav">
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1199" target="_blank"
                     rel="opener">狗粮专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1201" target="_blank"
                     rel="opener">猫粮专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1203" target="_blank"
                     rel="opener">保健品专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1205" target="_blank"
                     rel="opener">清洁专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1207" target="_blank"
                     rel="opener">驱虫专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1209" target="_blank"
                     rel="opener">零食专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1211" target="_blank"
                     rel="opener">罐头专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1213" target="_blank"
                     rel="opener">用品专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1215" target="_blank"
                     rel="opener">玩具专区</a></li>
              <li><a href="http://www.yczy365.com/goods.html?category_ids=1217" target="_blank"
                     rel="opener">猫砂专区</a></li>
            </ul>
            <div class="copyright" style="color: #797A8A;"><p>技术支持:四组全体成员</p></div>
          </div>


          <div class="footer-links">
            <a class="link-item link-item-1" href="javascript:;" title="">
              <div class="item-inner">
                <div class="img"><img src=""></div>
                <div class="title"></div>
              </div>
            </a>
          </div>

        </div>

      </div>

    </el-footer>
  </el-container>

</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        categoryArr: ["首页", "狗粮专区", "猫粮专区"],
        bannerArr: ["imgs/361fb9a617aa6182831a2a8eae02d2ac.jpg", "imgs/586096d28e60f8f40862a18d3aaa7bb4.jpg", "imgs/f72452d742ba38418c47c4fef57d72c8.jpg"],
        topArr: [],
        newArr: [],
        dogArr: [],
        catArr: [],
        healthArr: [],
        cleanArr: [],
        user:{},
        wd: ""
      }
    },
    methods: {
      search() {

      },
      handleSelect(key, keyPath) {
        //此时的key 就是index 是分类的id
        //跳转到结果页面 并把分类id传递过去

      }
    },
    created: function () {
      axios.get("/CurrentUser").then(function (response) {
        v.user=response.data;
      })
      //获取分类数据

      //获取轮播图数据

      //获取排行榜数据

      //获取商品数据

    }
  })
</script>
</html>